<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ include file="../common/header.jsp" %>
<section class="container">
<div class="content-wrap">
<div class="content">

	<header class="article-header">
		<h1 class="article-title"><a href="javascript:void(0);" onclick="dashangToggle()" title="${news.title }" >${news.title }</a></h1>
		<c:if test="${news.photo!=null}">
			<img data-original="${news.photo }" src="${news.photo }" alt="${news.title }" style="width: 100%;"/>
		</c:if>
		<div class="article-meta">
			<span class="item article-meta-time">
				<time class="time" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="发表时间：${news.createTime }"><i class="glyphicon glyphicon-time"></i>
					<fmt:formatDate value="${news.createTime }" pattern="yyyy-MM-dd HH:mm:ss" />
				</time>
			</span>
			<span class="item article-meta-source" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="来源：【ForFuture Design】">
				<i class="glyphicon glyphicon-globe"></i>
				ForFuture Group
			</span>
			<span class="item article-meta-author" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="作者${news.author }">
				<i class="glyphicon glyphicon-user"></i>${news.author }
			</span>
			<span class="item article-meta-category" data-toggle="tooltip" data-placement="bottom" title="${news.title }" data-original-title="${news.title }">
				<i class="glyphicon glyphicon-list"></i>
				<a href="" title="${news.newsCategory.name }" >${news.newsCategory.name }</a>
			</span>
			<span class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="浏览量：${news.viewNumber }">
				<i class="glyphicon glyphicon-eye-open"></i> ${news.viewNumber }
			</span>
			<span class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="评论量${news.commentNumber }">
				<i class="glyphicon glyphicon-comment"></i>${news.commentNumber }
			</span>
		</div>
		<article class="article-content">
			${news.content }
		</article>
  	</header>

  	<div class="article-tags">标签：
		<c:forEach items="${tags }" var="tag">
			<a href="/search_list?keyword=${tag }" rel="tag" >${tag }</a>
		</c:forEach>
  	</div>

	<%--打赏模块--%>
	<a class="dashang" href="javascript:void(0)" onclick="dashangToggle()">打赏</a>
	<!--打赏 start-->
	<div>
		<div class="dashang_content" >
			<div class="shang_box">
				<a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="关闭">
					<img src="/image/t_close.jpg"
						 style="width:10px;height:10px" alt="取消" /></a>
				<div class="shang_tit">
					<p>
						『感谢您的支持🌹，我会继续努力的📌』
					</p>
				</div>
				<div class="shang_payimg">
					<img src="/image/t_alipay.png" alt="扫码支持" title="扫一扫" />
				</div>
				<div class="pay_explain">㊟：扫码打赏，你说多少就多少 ⚠</div>
				<div class="shang_payselect">
					<div class="pay_item checked" data-id="alipay">
						<span class="radiobox"></span>
						<span class="pay_logo">
					      <img src="/image/t_alipay.jpg"
							   style="width:82px;height:28px"  alt="支付宝" />
					</span>
					</div>
					<div class="pay_item" data-id="weipay">
						<span class="radiobox"></span>
						<span class="pay_logo">
					      <img src="/image/t_wechat.jpg"
							   style="width:115px;height:28px" alt="微信" />
					</span>
					</div>
				</div>
				<div class="shang_info">
					<p>打开<span id="shang_pay_txt" style="font-weight:bold; margin: 6px;">支付宝</span>扫一扫，即可进行扫码打赏哦!!</p>
					<p>Powered by
						<a href="http://javaaj.com" target="_blank" title="ForFuture Design">Design  ForFuture Group</a>
						&nbsp;&nbsp; <a >gqzdev™💖</a>
					</p>
					<p>
						<a  href="javascript:void(0);"  id="flag_for_china"  alt="ganquanzhong">
							<img src="https://images.cnblogs.com/cnblogs_com/gqzdev/1564989/o_flag-for-china.png"  style="height: 120px;"
								 alt="China"/>
						</a>
					</p>
				</div>

			</div>
		</div>
	</div>
	<!--打赏 end-->

	<%--评论 start--%>
	 <div class="title" id="comment">
		<h3>评论</h3>
	 </div>
	 <div id="respond">
		<form id="comment-form" name="comment-form" action="" method="POST">
			<div class="comment">
				<input type="hidden" name="newsId" value="${news.id }">
				<%--<input name="nickname" id="nickname" class="form-control" size="22" placeholder="您的昵称（必填）" maxlength="15" autocomplete="off" tabindex="1" type="text">--%>
				<div class="comment-box">
					<textarea placeholder="您的评论或留言（必填）" name="content" id="comment-textarea" cols="100%" rows="3" tabindex="3"></textarea>
					<div class="comment-ctrl">
						<div class="comment-prompt" style="display: none;"> <i class="fa fa-spin fa-circle-o-notch"></i>
							<span class="comment-prompt-text">评论正在提交中...请稍后</span>
						</div>
						<div class="comment-success" style="display: none;"> <i class="fa fa-check"></i>
							<span class="comment-prompt-text">评论提交成功...</span>
						</div>
						<button type="button" id="comment-submit" tabindex="4">评论</button>
					</div>
				</div>
			</div>
		</form>
	</div>

	<%--评论列表--%>
	<div id="postcomments" style="padding-bottom:0px;">
		<ol id="comment_list" class="commentlist">
		</ol>
	</div>

	<%--标签--%>
  	<div class="ias_trigger" style="margin-top:0px;"><a href="javascript:;" id="load-more-comment-btn">查看更多</a></div>
</div>
</div>
<%@ include file="../common/sidebar.jsp" %>
</section>

<%@ include file="../common/footer.jsp" %>
<script>
	var page = 1;
	$(document).ready(function(){
		$("body").addClass('single');

		//评论文章
		$("#comment-submit").click(function(){
			/*if($("#nickname").val() == ''){
				alert('请填写昵称！');
				return;
			}*/
			if($("#comment-textarea").val() == ''){
				alert('请填写内容！');
				return;
			}
			// console.log($("#comment-form").serialize());
			$.ajax({
				url:'/comment_news',
				type:'post',
				data:$("#comment-form").serialize(),
				dataType:'json',
				success:function(data){
					if(data.type == 'success'){
						var li = '<li class="comment-content"><span class="comment-f">#'
								+ ($("#comment_list").children('li').length + 1);
							li += '</span><div class="comment-main"><p><a class="address" href="javascript:void(0);" rel="nofollow" target="">${sessionScope.newsuser.name}</a><span class="time">('+format(data.createTime)+')</span><br>'+$("#comment-textarea").val()+'</p></div></li></ol>';
						$("#comment_list").prepend(li);
						$("#comment-textarea").val('');
					}else{
						alert(data.msg);
						// 打开登录窗口
						$("#regist_container").hide();
						$("#_close").show();
						$("#_start").animate({
							left: '350px',
							height: '457px',
							width: '360px'
						}, 400, function() {
							$("#login_container").show(400);
							$("#_close").animate({
								height: '40px',
								width: '40px'
							}, 400);
						});
					}
				}
			});
		});

		//初始化  异步加载评论内容
		$.ajax({
			url:'/get_comment_list',
			type:'post',
			data:{rows:10,page:page++,newsId:'${news.id}'},
			dataType:'json',
			success:function(data){
				if(data.type == 'success'){
					var commentList = data.commentList;
					var html = '';
					for(var i=0;i<commentList.length;i++){
						var li = '<li class="comment-content"><span class="comment-f">#' + (commentList.length -i);
						li += '</span><div class="comment-main"><p><a class="address" href="javascript:void(0);" rel="nofollow" target="">'+commentList[i].nickname+'</a><span class="time">('+format(commentList[i].createTime)+')</span><br>'+commentList[i].content+'</p></div></li></ol>';
						html += li;
					}
					$("#comment_list").append(html);
				}
			}
		});

		//点击查看更多
		$("#load-more-comment-btn").click(function(){
			if($("#load-more-comment-btn").attr('data-key') == 'all'){return;}
			$("#load-more-comment-btn").text('查看更多评论');
			//异步加载评论内容
			$.ajax({
				url:'/get_comment_list',
				type:'post',
				data:{rows:10,page:page++,newsId:'${news.id}'},
				dataType:'json',
				success:function(data){
					if(data.type == 'success'){
						var commentList = data.commentList;
						$("#load-more-comment-btn").text('查看更多评论!');
						if(commentList.length == 0){
							$("#load-more-comment-btn").text('没有更多了!');
							$("#load-more-comment-btn").attr('data-key','all');
						}
						var html = '';
						for(var i=0;i<commentList.length;i++){
							var li = '<li class="comment-content"><span class="comment-f">#' + ($("#comment_list").children('li').length + i + 1);
							li += '</span><div class="comment-main"><p><a class="address" href="#" rel="nofollow" target="_blank">'+commentList[i].nickname+'</a><span class="time">('+format(commentList[i].createTime)+')</span><br>'+commentList[i].content+'</p></div></li></ol>';
							html += li;
						}
						$("#comment_list").append(html);
					}
				}
			});
		});
	});

	<!--  打赏JS  start-->
	/*    文章签名的地方显示打赏    */
	$("#MySignature").before('<a class="dashang" onclick="dashangToggle()"  style="margin: 5px auto;" >打赏</span></a>');

	$(function() {
		$(".pay_item").click(function() {
			$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
			var dataid = $(this).attr('data-id');

			$(".shang_payimg img").attr("src", "/image/t_" + dataid + ".png");
			$("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
		});
	});

	function dashangToggle() {
		$(".hide_box").fadeToggle();
		$(".shang_box").fadeToggle();
	}
</script>
